<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <link rel="stylesheet" href="./bootstrap/css/bootstrap.css" />
  <style>
    .panel {
      width: 900px;
      margin: 10px auto;
    }

    .table img {
      width: 40px;
      height: 40px;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="panel panel-primary">
      <!-- Default panel contents -->
      <div class="panel-heading">英雄列表管理</div>
      <div class="panel-body">
        <!-- 存放的搜索区域 -->
        <form action="" autocomplete="off">
          <div class="row">
            <div class="col-lg-3">
              <input type="text" class="form-control" placeholder="输入英雄名称" name="name" />
            </div>
            <div class="col-lg-3">
              <select class="form-control" name="gender">
                <option value="">--选择性别--</option>
                <option value="男">男</option>
                <option value="女">女</option>
              </select>
            </div>
            <div class="col-lg-3">
              <input name="age" type="text" class="form-control" placeholder="输入年龄" />
            </div>
            <div class="col-lg-3">
              <button type="button" class="btn btn-success" id="search">
                搜索
              </button>
              <button type="button" class="btn btn-warning" id="reset">
                重置
              </button>
            </div>
          </div>
        </form>
      </div>
      <table class="table table-bordered table-striped">
        <thead>
          <tr>
            <th>编号</th>
            <th>英雄名称</th>
            <th>英雄性别</th>
            <th>年龄</th>
            <th>操作区</th>
          </tr>
        </thead>
        <tbody id="tbody">
          <!-- <tr>
            <td>1</td>
            <td>大乔</td>
            <td>女</td>
            <td>18</td>
            <td>
              <button type="button" class="btn btn-danger">删除</button>
            </td>
          </tr> -->
        </tbody>
      </table>
    </div>
  </div>
  <script>
    // 数据可以自己添加
    // JSON.parse(localStorage.getItem('arrs')) || 
    const list =[
      { id: 1, name: "大乔", gender: "男", age: 18 },
      { id: 2, name: "小乔", gender: "女", age: 20 },
      { id: 3, name: "鲁班", gender: "男", age: 48 },
      { id: 4, name: "后羿", gender: "女", age: 28 },
    ]
    // const btnSuccess=document.querySelector('.btn-success')
    // const btnWarning=document.querySelector('.btn-warning')
    // const btnDanger=document.querySelector('.btn-danger')
    // btnSuccess.addEventListener('click',()=>{
    //   const names=document.querySelector('[name=name]').value
    //   const genders=document.querySelector('[name=gender]').value
    //   const ages=document.querySelector('[name=age]').value
    //    37;;
    //   // let nwebody=
    //   list.map(item=>{
    //     if((names===item.name || names==='') && (genders===item.gender || genders==='') && (ages===item.age || ages==='')){
    //       newarr.innerHTML +=`
    //       <tr>
    //         <td>${item.id}</td>
    //         <td>${item.name}</td>
    //         <td>${item.gender}</td>
    //         <td>${item.age}</td>
    //         <td>
    //           <button type="button" class="btn btn-danger">删除</button>
    //         </td>
    //       </tr>
    //       `
    //       // newarr.innerHTML=(nwebody.join(''))
          
    //     }
    //   })
    //   localStorage.setItem('body',JSON.stringify(newdata))
    // })
    // 渲染页面
     const tbodys=document.querySelector('#tbody')
    function render(arr){
    
      const arrs=arr.map((item,index)=>{
        return `
        <tr>
            <td>${item.id}</td>
            <td>${item.name}</td>
            <td>${item.gender}</td>
            <td>${item.age}</td>
            <td>
              <button type="button" class="btn btn-danger" >删除</button>
            </td>
          </tr>
        `
      })
      tbodys.innerHTML=arrs.join('')
         // // 删除功能
 
    const btnDanger=document.querySelectorAll('.btn-danger')
    btnDanger.forEach((item,index)=>{
      item.addEventListener('click',()=>{
        const flag=confirm('您确定要删除吗')
      if(!flag) return
      list.splice(index,1)
      render(list)
      })
     
    })
   
    // function del(index){
      
      
    //   console.log(arrs);
    //   localStorage.setItem('arr',arrs)
    //   render(arr)
    // }
    } 
    render(list)
 

    // 搜索
    const name=document.querySelector('[name=name]')
      const gender=document.querySelector('[name=gender]')
      const age=document.querySelector('[name=age]')
    const btnSuccess=document.querySelector('.btn-success')
    btnSuccess.addEventListener('click',()=>{
      const names=name.value
      const genders=gender.value
      const ages=age.value
      const arr=list.filter(item=>{
        return (names===item.name || names==='') && (genders===item.gender || genders==='') && (+ages===item.age || ages==='')
      })
      render(arr)
    })
    // 重置
    const btnWarning=document.querySelector('.btn-warning')
    btnWarning.addEventListener('click',()=>{
      name.value=''
      gender.value=''
      age.value=''
      render(list)
    })
    
  </script>
</body>

</html>